<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useVModel } from "@vueuse/core";
import { getMaterialTreeQueryTree } from "@/api/materialTree";

interface Tree {
  id: number;
  cateName: string;
  codePrefix: string;
  pid: number;
  children?: Tree[];
}
const props = defineProps({
  materialCateId: {
    type: [String, Number],
    default: null
  }
});

const emit = defineEmits(["update:materialCateId"]);
const cateId = useVModel(props, "materialCateId", emit);
const treeData = ref([]);
const defaultProps = {
  children: "children",
  label: "cateName"
};

// 节点点击
const handleNodeClick = (data: Tree) => {
  cateId.value = data.id;
};

onMounted(() => {
  getMaterialTreeQueryTree().then(res => {
    treeData.value = res.data;
  });
});
</script>
<template>
  <el-scrollbar
    class="scroller w-[200px] rounded-[4px] border border-[#E6E6E6] border-solid bg-[#ffffff] pr-[16px] pl-[16px]"
  >
    <p class="text-[14px] pt-[14px] pb-[14px] font-text">全部</p>
    <el-tree
      :data="treeData"
      :props="defaultProps"
      highlight-current
      default-expand-all
      @node-click="handleNodeClick"
    />
  </el-scrollbar>
</template>
<style lang="scss" scoped>
.scroller {
  height: auto;
  .font-text {
    color: rgba(0, 0, 0, 0.6);
  }
}
</style>
